<template>
	<view class="detail-box" @click="handleToDetail">
		<u-image :src="image" class="detail-img" mode="cover" :lazy-load="true" height="172" width="130" border-radius="4">
			<u-loading slot="loading"></u-loading>
		</u-image>
		<view class="detail-info">
			<view class="detail-top">
				<view class="detail-title u-line-1">
					<view class="name u-line-1">{{ name }}</view>
					<view class="writer u-line-1">{{ writer }}</view>
				</view>
				<view class="detail-tag">
					<u-tag v-if="is_over" type="success" class="u-m-r-10" :text="is_over"></u-tag>
					<u-tag v-if="type" type="warning" :text="type"></u-tag>
				</view>
			</view>
			<view class="detail-intro u-line-2">{{ intro }}</view>
			<view v-if="timestamp!=0">{{$u.timeFrom(timestamp, 'yyyy年mm月dd日')}}读过</view>
			<view class="detail-last u-line-1" v-if="lastReadChapterName"><text class="detail-text">上次读到:</text><text class="detail-text">{{lastReadChapterName}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: '未知'
			},
			writer: {
				type: String,
				default: '未知'
			},
			is_over: {
				type: String,
				default: '未知'
			},
			type: {
				type: String,
				default: '未知'
			},
			intro: {
				type: String,
				default:'暂无简介'
			},
			bookId: {
				type: [Number, String],
				required: true
			},
			image: {
				type: String,
				default: 'http://foglake.sanye666.top/images/default-covor.jpg'
			},
			lastReadChapterId: {
				default: 0,
				type: [Number, String]
			},
			lastReadChapterName: String,
			timestamp: {
				type: [String, Number],
				default: 0
			}
		},
		methods:{
			handleToDetail() {
				uni.navigateTo({
					url: `/pages/detail/index?bookId=${this.bookId}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-box {
		position: relative;

		.detail-img {
			position: absolute;
			background-repeat: no-repeat;
			box-shadow: 0px 4px 12px 0px rgba(6, 27, 65, 0.16);
		}

		.detail-info {
			height: 172rpx;
			padding: 0 10px 0 80px;

			.detail-top {
				display: flex;
				justify-content: space-between;

				.name {
					font-size: 14px;
					font-family: Alibaba PuHuiTi;
					color: rgba(6, 27, 65, 0.75);
					margin-bottom: 6px;
				}

				.writer {
					font-size: 10px;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: rgba(6, 27, 65, 0.35);
					margin-bottom: 5px;
				}

				.detail-tag {
					font-size: 12px;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					word-break: keep-all;
					white-space: nowrap;
				}
			}

			.detail-intro {
				font-size: 12px;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: rgba(6, 27, 65, 0.35);
			}
			
			.detail-last {
				font-size: 22rpx;
				margin-top: 24rpx;
			}
			
			.detail-last .detail-text:first-child {
				font-weight: 400;
				margin-right: 10rpx;
			}
			
			.detail-last .detail-text:last-child {
				font-weight: 800;
			}
		}
	}
</style>
